<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/common.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@ include file="/WEB-INF/jsp/importHead.jsp"%>
<%@ include file="/WEB-INF/jsp/manage/importCommonCss.jsp"%>
<link rel="stylesheet" type="text/css" href="${basePath }/css/manage/style.css" />
<link rel="stylesheet" type="text/css" href="${basePath }/css/manage/bootstrap.min.css" />
<style>
input[type="text"], 
input[type="password"], 
textarea, 
textarea.form-control {
	height: 50px;
    margin: 0;
    padding: 0 20px;
    vertical-align: middle;
    background: #f8f8f8;
    border: 3px solid #ddd;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 50px;
    color: #888;
    -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
    -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
    -o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;
}

textarea, 
textarea.form-control {
	padding-top: 10px;
	padding-bottom: 10px;
	line-height: 30px;
}

input[type="text"]:focus, 
input[type="password"]:focus, 
textarea:focus, 
textarea.form-control:focus {
	outline: 0;
	background: #fff;
    border: 3px solid #ccc;
    -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
}

input[type="text"]:-moz-placeholder, input[type="password"]:-moz-placeholder, 
textarea:-moz-placeholder, textarea.form-control:-moz-placeholder { color: #888; }

input[type="text"]:-ms-input-placeholder, input[type="password"]:-ms-input-placeholder, 
textarea:-ms-input-placeholder, textarea.form-control:-ms-input-placeholder { color: #888; }

input[type="text"]::-webkit-input-placeholder, input[type="password"]::-webkit-input-placeholder, 
textarea::-webkit-input-placeholder, textarea.form-control::-webkit-input-placeholder { color: #888; }

button.btn {
	height: 50px;
    margin: 0;
    padding: 0 20px;
    vertical-align: middle;
    background: #4aaf51;
    border: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 50px;
    color: #fff;
    -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
    text-shadow: none;
    -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
    -o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;
}

button.btn:hover { opacity: 0.6; color: #fff; }

button.btn:active { outline: 0; opacity: 0.6; color: #fff; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }

button.btn:focus { outline: 0; opacity: 0.6; background: #4aaf51; color: #fff; }

button.btn:active:focus, button.btn.active:focus { outline: 0; opacity: 0.6; background: #4aaf51; color: #fff; }

</style>
</head>
<!--[if lte IE 8]>
    <div class="text-xs-center m-b-0 bg-blue-grey-100 alert">
      <button type="button" class="close" aria-label="Close" data-dismiss="alert">
        <span aria-hidden="true">×</span></button>你正在使用一个
      <strong>过时</strong>的浏览器。请
      <a href=https://browsehappy.com/ target=_blank>升级您的浏览器</a>，以提高您的体验。</div>
  <![endif]-->
<body>
	<div class="top-content">
		<div class="inner-bg">
			<div class="container">
				<div class="row">
					<div class="col-sm-6 col-sm-offset-3 form-box">
						<div class="form-top">
							<div class="form-top-left">
								<h3>登录网站管理后台</h3>
								<p>请输入用户名和密码后点击登录:</p>
							</div>
							<div class="form-top-right">
								<i class="fa fa-key"></i>
							</div>
						</div>
						<div class="form-bottom">
							<form role="form"
								action="${basePath }/login/"
								method="post" class="login-form">
								<div class="form-group">
									<label class="sr-only" for="form-username">Username</label> <input
										type="text" name="username" placeholder="用户名..."
										class="form-username form-control" id="form-username">
								</div>
								<div class="form-group">
									<label class="sr-only" for="form-password">Password</label> <input
										type="password" name="password" placeholder="密码..."
										class="form-password form-control" id="form-password">
								</div>
								<button type="submit" class="btn">登&nbsp;录!</button>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<%@ include file="/WEB-INF/jsp/manage/importCommonJS.jsp"%>
	<script>
	jQuery(document).ready(function() {
		var $loginForm = $('.login-form');
		var $field = $loginForm.find('input[type="text"], input[type="password"], textarea');
	    /*
	        Fullscreen background
	    */
	    $.backstretch("${basePath}/images/1.jpg");
	    
	    /*
	        Form validation
	    */
	    
	    var loginError = '${loginError}';
	    
	    $field.each(function(){
		    if(loginError === true || loginError === 'true'){
		    	$(this).addClass('input-error');
		    }
		    else{
		    	$(this).removeClass('input-error');
		    }
	    });
	    
	    $field.on('focus', function() {
	    	$(this).removeClass('input-error');
	    });
	    
	    $loginForm.on('submit', function(e) {
	    	
	    	$field.each(function(){
	    		if( $(this).val().replace(/\s/g,"").length == 0) {
	    			e.preventDefault();
	    			$(this).addClass('input-error');
	    		}
	    		else {
	    			$(this).removeClass('input-error');
	    		}
	    	});
	    	
	    	if($loginForm.find(".input-error").length == 0){
	    		$loginForm.attr("action",$loginForm.attr("action") + $("#form-username").val());
	    	}
	    });
	});
	</script>
</body>
</html>